<template>
  <div class="science-page hiddenScroll">
    <LayoutContainer>
      <el-container class="layout-container">
        <el-aside width="200px">
          <el-menu background-color="#f5faf6">
            <RouterLink v-for="(item, index) in knowledge" :to="item.router">
              <el-menu-item :index="`${index}`" @click="currentTitle = index">
                {{ item.title }}
              </el-menu-item>
            </RouterLink>
          </el-menu>
        </el-aside>
        <el-main>
          <LayoutScienceContainer></LayoutScienceContainer>
        </el-main>
      </el-container>
    </LayoutContainer>
  </div>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import LayoutScienceContainer from './Layout/LayoutScienceContainer.vue'
import { RouterLink } from 'vue-router'
import { ref, watch } from 'vue'

// 根路由
const rootURL = '/science'

const knowledge = [
  {
    title: '什么是绿色消费？',
    router: `${rootURL}/greenconsumption`,
  },
  {
    title: '什么是碳足迹？',
    router: `${rootURL}/carbonfootprint`,
  },
  {
    title: '什么是零废弃？',
    router: `${rootURL}/zerowaste`,
  },
  {
    title: '什么是可持续发展?',
    router: `${rootURL}/sustainabledevelopment`,
  },
  {
    title: '为什么发展电车?',
    router: `${rootURL}/tramwaypolicy`,
  },
  {
    title: '中国的贡献有哪些?',
    router: `${rootURL}/chinacontribution`,
  },
  {
    title: '全球变暖的趋势怎么样了?',
    router: `${rootURL}/globalwarming`,
  },
]

const currentTitle = ref(0)

const name = ref(knowledge[currentTitle.value].title)

watch(currentTitle, (newTitle) => (currentTitle.value = newTitle))
</script>

<style scoped less="scss">
.science-page {
  .el-aside {
    width: 240px;
    border-right: 2px solid rgb(236, 236, 236);

    .el-menu {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 7px;

      margin-top: 5px;
      border: none;

      /* 导航栏按钮 */
      .el-menu-item {
        display: flex;
        justify-content: start;
        align-items: center;

        width: 230px;
        height: 35px;
        padding: 5px;
        border-radius: 5px;
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 1px;
        color: rgb(103, 110, 119);
        transition: all 0.5s;
      }

      .el-menu-item:hover {
        background-color: rgb(235, 245, 255);
      }
    }
  }

  .el-main {
    height: 800px;
    padding-right: 5px;
  }
}
</style>
